<template>
  <Row>
    <Col span="6" order="1">
      <group_tree :tree_data="tree_data" @onLoadTreeData="loadTreeData" @onNodeClick="nodeClick"
                  :isMultiple="false"></group_tree>
    </Col>
    <Col span="18" order="2">
      <Form ref="lessonformInline" inline :style="{'padding-top': '20px'}">
        <FormItem>
          <Input type="text" placeholder="请输入课程编号" size="large" style="width: 300px" clearable
                 v-model="search_code"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入课程名称" size="large" style="width: 300px" clearable
                 v-model="search_name"></Input>
        </FormItem>
        <FormItem>
          <Select style="width:300px" size="large" clearable v-model="search_status">
            <Option v-for="(item, index) in search_status" :value="item.value" :key="index">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入学习天数" size="large" style="width: 300px" clearable
                 v-model="search_allowday"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入通过分数" size="large" style="width: 300px" clearable
                 v-model="search_mark"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入课程费用" size="large" style="width: 300px" clearable
                 v-model="search_cost"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入学时" size="large" style="width: 300px" clearable
                 v-model="search_hour"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入是否公开课 0:否1:是（默认）" size="large" style="width: 300px" clearable
                 v-model="search_isopen"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入使用对象" size="large" style="width: 300px" clearable
                 v-model="search_objectable"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入通过分数" size="large" style="width: 300px" clearable
                 v-model="search_maker"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入备注" size="large" style="width: 300px" clearable
                 v-model="search_remark"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入课程类型 2  单一入口课件4  scorm课件 " size="large" style="width: 300px" clearable
                 v-model="search_kj_type"></Input>
        </FormItem>
        <FormItem>
          <DatePicker type="date" placeholder="创建时间-起始..." style="width: 300px" clearable size="large"
                      @on-change="handle_search_start_create_time" editable></DatePicker>
        </FormItem>
        <FormItem>
          <Icon type="minus-round"></Icon>
          <Icon type="minus-round"></Icon>
        </FormItem>
        <FormItem>
          <DatePicker type="date" placeholder="创建时间-结束..." style="width: 300px" clearable size="large"
                      @on-change="handle_search_end_create_time" editable></DatePicker>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入单一入口课件的url" size="large" style="width: 300px" clearable
                 v-model="search_enter_url"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入培训目标" size="large" style="width: 300px" clearable
                 v-model="search_training_target"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入主要内容" size="large" style="width: 300px" clearable
                 v-model="search_training_comment"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入培训方式" size="large" style="width: 300px" clearable
                 v-model="search_training_manner"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入允许退课时间范围（已废除，退课不做时间限制）" size="large" style="width: 300px" clearable
                 v-model="search_handbacktime"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入是否可以预览 0:不可预览 1:可以预览（默认）" size="large" style="width: 300px" clearable
                 v-model="search_ispermit_preview"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入是否微课件 1:否(默认）2:是" size="large" style="width: 300px" clearable
                 v-model="search_ismini"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入终端类型1:pc终端 2：移动终端 3：pc和移动终端" size="large" style="width: 300px" clearable
                 v-model="search_terminaltype"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入pc终端和移动终端视频名称" size="large" style="width: 300px" clearable
                 v-model="search_path"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入课件提供商（手动输入）" size="large" style="width: 300px" clearable
                 v-model="search_coursewareprovider"></Input>
        </FormItem>
        <FormItem>
          <DatePicker type="date" placeholder="出版日期-起始..." style="width: 300px" clearable size="large"
                      @on-change="handle_search_start_publishdate" editable></DatePicker>
        </FormItem>
        <FormItem>
          <Icon type="minus-round"></Icon>
          <Icon type="minus-round"></Icon>
        </FormItem>
        <FormItem>
          <DatePicker type="date" placeholder="出版日期-结束..." style="width: 300px" clearable size="large"
                      @on-change="handle_search_end_publishdate" editable></DatePicker>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入课程版本 默认1.0" size="large" style="width: 300px" clearable
                 v-model="search_versioncode"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入语种 默认：汉语" size="large" style="width: 300px" clearable
                 v-model="search_languagetype"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入课程关键字" size="large" style="width: 300px" clearable
                 v-model="search_keyword"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入作者" size="large" style="width: 300px" clearable
                 v-model="search_author"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入控制课件显示类型（三分屏、二分屏）" size="large" style="width: 300px" clearable
                 v-model="search_selfnavigator"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入课程页面控制参数" size="large" style="width: 300px" clearable
                 v-model="search_selfindexlink"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入讲师" size="large" style="width: 300px" clearable
                 v-model="search_teacher"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入课程封面图片" size="large" style="width: 300px" clearable
                 v-model="search_lesson_img"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入1 本地路径    0 网络路径" size="large" style="width: 300px" clearable
                 v-model="search_urluptype"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入学分" size="large" style="width: 300px" clearable
                 v-model="search_score"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入资源列表" size="large" style="width: 300px" clearable
                 v-model="search_resourceids"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入mp4小节数量" size="large" style="width: 300px" clearable
                 v-model="search_kj_count"></Input>
        </FormItem>
        <FormItem>
          <Input type="text" placeholder="请输入建立课程时上传的文件名" size="large" style="width: 300px" clearable
                 v-model="search_file"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="loadTableData" size="large">查询</Button>
        </FormItem>
      </Form>
      <Button type="info" icon="android-add-circle" shape="circle" @click="add_lesson" :disabled="btn_disabled">增加
      </Button>
      <lesson_table :column_header="column_header" :table_data="table_data" :total_page="total_page"></lesson_table>
      <Page :total="total_page" class="page_tools" @on-change="change" @on-page-size-change="change"></Page>
    </Col>
  </Row>
</template>
<script>
  import group_tree from '../utils/tree_components_util'
  import lesson_table from '../utils/table_components_util'

  export default {
    data() {
      return {
        column_header: [
          {type: 'selection', width: 60, align: 'center'},
          {title: '课程编号', key: 'code', align: 'left'},
          {title: '课程名称', key: 'name', align: 'left'},
          {
            title: '状态', key: 'status', align: 'center',
            render: (h, params) => {
              var icon = 'heart-broken';
              var color = 'red';
              if (params.row.status == 1) {
                icon = 'heart';
                color = 'green';
              }
              return h('div', [
                h('Icon', {
                  props: {
                    type: icon,
                    size: '25',
                    color: color
                  }
                })
              ]);
            }
          },
          {title: '学习天数', key: 'allowday', align: 'left'},
          {title: '通过分数', key: 'mark', align: 'left'},
          {title: '课程费用', key: 'cost', align: 'left'},
          {title: '学时', key: 'hour', align: 'left'},
          {title: '是否公开课 0:否1:是（默认）', key: 'isopen', align: 'left'},
          {title: '使用对象', key: 'objectable', align: 'left'},
          {title: '通过分数', key: 'maker', align: 'left'},
          {title: '备注', key: 'remark', align: 'left'},
          {title: '课程类型 2  单一入口课件4  scorm课件 ', key: 'kj_type', align: 'left'},
          {title: '创建时间', key: 'create_time', align: 'left'},
          {title: '单一入口课件的url', key: 'enter_url', align: 'left'},
          {title: '培训目标', key: 'training_target', align: 'left'},
          {title: '主要内容', key: 'training_comment', align: 'left'},
          {title: '培训方式', key: 'training_manner', align: 'left'},
          {title: '允许退课时间范围（已废除，退课不做时间限制）', key: 'handbacktime', align: 'left'},
          {title: '是否可以预览 0:不可预览 1:可以预览（默认）', key: 'ispermit_preview', align: 'left'},
          {title: '是否微课件 1:否(默认）2:是', key: 'ismini', align: 'left'},
          {title: '终端类型1:pc终端 2：移动终端 3：pc和移动终端', key: 'terminaltype', align: 'left'},
          {title: 'pc终端和移动终端视频名称', key: 'path', align: 'left'},
          {title: '课件提供商（手动输入）', key: 'coursewareprovider', align: 'left'},
          {title: '出版日期', key: 'publishdate', align: 'left'},
          {title: '课程版本 默认1.0', key: 'versioncode', align: 'left'},
          {title: '语种 默认：汉语', key: 'languagetype', align: 'left'},
          {title: '课程关键字', key: 'keyword', align: 'left'},
          {title: '作者', key: 'author', align: 'left'},
          {title: '控制课件显示类型（三分屏、二分屏）', key: 'selfnavigator', align: 'left'},
          {title: '课程页面控制参数', key: 'selfindexlink', align: 'left'},
          {title: '讲师', key: 'teacher', align: 'left'},
          {title: '课程封面图片', key: 'lesson_img', align: 'left'},
          {title: '1 本地路径    0 网络路径', key: 'urluptype', align: 'left'},
          {title: '学分', key: 'score', align: 'left'},
          {title: '资源列表', key: 'resourceids', align: 'left'},
          {title: 'mp4小节数量', key: 'kj_count', align: 'left'},
          {title: '建立课程时上传的文件名', key: 'file', align: 'left'},
          {
            title: '操作', key: 'handler', align: 'center', render: (h, params) => {
              const _this = this;
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'edit',
                    size: '20'
                  },
                  style: {
                    marginRight: '5px',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.$emit('childClickMenu', '资源管理', '课程管理', 'lesson_edit', {"id": params.row.id});
                    }
                  }
                }, 'View'),
                h('Icon', {
                  props: {
                    type: 'trash-a',
                    size: '20'
                  },
                  style: {
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      if (params.row.id == -1) {
                        this.$Notice.error({title: '警告', desc: '基础数据不可以删除!'});
                        return;
                      }
                      this.$Modal.warning({
                        title: "注意",
                        content: "确定要删除数据吗？",
                        onOk: function () {
                          this.$http.delete(this.apiUrl() + 'lesson/delete/' + params.row.id, {
                            emulateJSON: true
                          }).then((response) => {
                            if (response.body.success) {
                              this.$Message.success(response.body.msg);
                              _this.loadTableData();
                            } else {
                              this.$Notice.error({title: '错误', desc: response.body.msg});
                            }
                          });
                        }
                      });
                    }
                  }
                }, 'Delete')
              ]);
            }
          }
        ],
        table_data: [],
        total_page: 0,
        current_page: 1,
        tree_data: [],
        current_group_id: '',
        search_code: '',
        search_name: '',
        search_status: [{
          value: "0",
          label: "未发布"
        }, {
          value: "1",
          label: "已发布"
        }],
        search_allowday: '',
        search_mark: '',
        search_cost: '',
        search_hour: '',
        search_isopen: '',
        search_objectable: '',
        search_maker: '',
        search_remark: '',
        search_kj_type: '',
        search_start_create_time: '',
        search_end_create_time: '',
        search_enter_url: '',
        search_training_target: '',
        search_training_comment: '',
        search_training_manner: '',
        search_handbacktime: '',
        search_ispermit_preview: '',
        search_ismini: '',
        search_terminaltype: '',
        search_path: '',
        search_coursewareprovider: '',
        search_start_publishdate: '',
        search_end_publishdate: '',
        search_versioncode: '',
        search_languagetype: '',
        search_keyword: '',
        search_author: '',
        search_selfnavigator: '',
        search_selfindexlink: '',
        search_teacher: '',
        search_lesson_img: '',
        search_urluptype: '',
        search_score: '',
        search_resourceids: '',
        search_kj_count: '',
        search_file: '',
        btn_disabled: true
      }
    },
    //注册组件
    components: {
      group_tree: group_tree,
      lesson_table: lesson_table
    },
    created: function () {
      //加载表格数据
      this.loadTableData();
      //加载机构树数据
      this.loadTreeData();
    },
    methods: {
      handle_search_start_create_time: function (changeValue, date) {
        this.search_start_create_time = changeValue;
      },
      handle_search_end_create_time: function (changeValue, date) {
        this.search_end_create_time = changeValue;
      },
      handle_search_start_publishdate: function (changeValue, date) {
        this.search_start_publishdate = changeValue;
      },
      handle_search_end_publishdate: function (changeValue, date) {
        this.search_end_publishdate = changeValue;
      },
      /**
       * 点击分页，页数标签时调用的方法
       * @param page_num  页码改变的回调，返回改变后的页码
       */
      change: function (page_num) {
        this.current_page = page_num;
        this.loadTableData();
      },
      loadTableData: function () {
        this.$http.post(this.apiUrl() + "lesson/grid/", {
          group_id: this.current_group_id,
          search_code: this.search_code,
          search_name: this.search_name,
          search_status: this.search_status,
          search_allowday: this.search_allowday,
          search_mark: this.search_mark,
          search_cost: this.search_cost,
          search_hour: this.search_hour,
          search_isopen: this.search_isopen,
          search_objectable: this.search_objectable,
          search_maker: this.search_maker,
          search_remark: this.search_remark,
          search_kj_type: this.search_kj_type,
          search_start_create_time: this.search_start_create_time,
          search_end_create_time: this.search_end_create_time,
          search_enter_url: this.search_enter_url,
          search_training_target: this.search_training_target,
          search_training_comment: this.search_training_comment,
          search_training_manner: this.search_training_manner,
          search_handbacktime: this.search_handbacktime,
          search_ispermit_preview: this.search_ispermit_preview,
          search_ismini: this.search_ismini,
          search_terminaltype: this.search_terminaltype,
          search_path: this.search_path,
          search_coursewareprovider: this.search_coursewareprovider,
          search_start_publishdate: this.search_start_publishdate,
          search_end_publishdate: this.search_end_publishdate,
          search_versioncode: this.search_versioncode,
          search_languagetype: this.search_languagetype,
          search_keyword: this.search_keyword,
          search_author: this.search_author,
          search_selfnavigator: this.search_selfnavigator,
          search_selfindexlink: this.search_selfindexlink,
          search_teacher: this.search_teacher,
          search_lesson_img: this.search_lesson_img,
          search_urluptype: this.search_urluptype,
          search_score: this.search_score,
          search_resourceids: this.search_resourceids,
          search_kj_count: this.search_kj_count,
          search_file: this.search_file,
          current_page: this.current_page
        }, {
          emulateJSON: true
        }).then((response) => {
          if (response.body.success) {
            this.table_data = response.body.grid;
            this.total_page = response.body.total_count;
          }
        });
      },
      loadTreeData: function (item, callback) {
        var parentid = '-1';
        if (item != undefined) {
          parentid = item.id;
        }
        this.$http.post(this.apiUrl() + "group/tree/", {
          parent_id: parentid
        }, {
          emulateJSON: true
        }).then((response) => {
          if (item != undefined) {
            callback(response.body);
          } else {
            this.tree_data = response.body;
          }
        });
      },
      nodeClick: function (node) {
        var groupid = node.id;
        this.current_group_id = groupid;
        this.loadTableData();
        this.btn_disabled = false;
      },
      add_lesson: function () {
        this.$emit('childClickMenu', '资源管理', '课程管理', 'lesson_edit', {"group_id": this.current_group_id, "id": ''});
      }
    }
  }
</script>
<style scoped>
  page_tools {
    float: right;
    padding-top: 10px;
    padding-bottom: 10px;
  }
</style>
